<template>
  <div class="bg-transparent w-full flex justify-center pt-4 m:pb-10 px-3">
    <n-input v-model:value="message" size="large" @keyup.enter="sendMessage" clearable type="text"
      class="shadow-[0_0_10px_rgba(0,0,0,0.10)] w-[848px]" placeholder="请输入消息内容" :allow-input="noSideSpace"
      :disabled="$props.getting">
      <template #suffix>
        <n-button text @click="sendMessage" :disabled="!message" class="ml-2 text-lg">
          <template #icon>
            <n-icon :component="SendOutline" class="text-dark dark:text-white" />
          </template>
        </n-button>
      </template>
    </n-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { noSideSpace } from '@/utils'
import { SendOutline } from '@vicons/ionicons5'

const emit = defineEmits(['sendMsg', 'changeMsg'])

const props = defineProps({
  getting: {
    type: Boolean
  }
})

let message = ref('')

const changeMsg = msg => {
  if (msg?.trim()) {
    message.value = msg
  }
}

const sendMessage = () => {
  emit('changeMsg', message.value)
  emit('sendMsg')
  message.value = ''
}

defineExpose({
  changeMsg
})
</script>

<style lang="less" scoped></style>
